<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 500px;
            height: 500px;
            background-color: bisque;
        }
        .box1{
            width: 100px;
            height: 100px;
            background-color: #bfa;
            /* animation-name用来设置动画的名字 */
            animation-name: test;
            /* animation-duration用来设置动画的时间 */
            animation-duration: 4s;
            /* animation-iteration-count用来设置动画运行的次数 */
            /* 可以设置整数，也可以设置infinite，表示执行无数次 */
            animation-iteration-count:1;
            /*
             animation-direction用来设置运行的方向
                1.normal表示默认情况，正常执行
                2.reverse表示执行顺序相反
                3.alternate表示正常执行一次完后，反方向执行一次
                4.alternate-reverse表示先反方向执行，再按正常方向执行
             */
            /* animation-direction:normal; */
            /* animation-timing-function用来设置运动效果 */
            /* animation-timing-function:linear; */
            /* animation-delay用来设置动画运行的延迟时间 */
            animation-delay: 2s;
            /* 
            animation-fill-mode:用来设置动画的填充效果
                1.none表示正常状态，运行结束后回到原来位置
                2.forwards表示运行结束后停在终点位置
                3.backwards表示在延迟的时候就处于开始状态
                4.all表示同时拥有forwards和backwards效果
             */
            animation-fill-mode:backwards;
        }
        @keyframes test{
            form{
                background-color: red;
                margin-left: 0;
            }
            to{
                margin-left: 400px;
                background-color: orange;
            }
        }
        /* .box:hover .box1{ */
            /* animation-play-state用来设置动画运行的状态，可以设置暂停或运行 */
            /* animation-play-state:paused; */
        /* }    */
    </style>
</head>
<body>
    <div class="box">
        <div class="box1"></div>
    </div>
</body>
</html>